<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '共读计划',
	},
}
</route>

<template>
	<view class="page-plan">
		<fly-navbar leftText="共读计划" fixed />
		<view class="py-6 box-border">
			<view class="w-full pl-4 box-border" v-if="gradeList.length">
				<view class="flex items-center h-[63rpx]">
					<view
						class="px-3 h-full flex justify-center items-center rounded-[30rpx] text-[#303030] text-[26rpx] mr-2"
						style="background: #f3f3f5"
						@tap="openModal"
						>{{ gradeInfo.name }} <text class="triangle"></text
					></view>
				</view>
			</view>
			<view class="py-[22rpx] px-4 box-border w-full">
				<view class="w-full">
					<block v-if="platformInfo.thisPage === 1">
						<image
							v-if="currentInfo && currentInfo.cover_img"
							@tap="toDetails(currentInfo.id)"
							class="w-full h-[291rpx] rounded-[30rpx]"
							:src="currentInfo.cover_img"
						></image>
						<block v-if="platformList.length">
							<view
								class="w-full flex justify-between items-center mt-[22rpx]"
								v-for="item in platformList"
								@tap="toDetails(item.id)"
								:key="item.id"
							>
								<image
									class="w-[222rpx] h-[153rpx] rounded-[30rpx]"
									mode="aspectFit"
									:src="item.cover_img"
								></image>
								<view
									class="flex-1 flex flex-col justify-between py-[13rpx] pl-[20rpx] box-border h-[153rpx]"
								>
									<text class="text-[#303030] text-[26rpx]">{{ item.title }}</text>
									<view v-if="item.status === 0" class="flex items-center">
										<view
											class="text-[#fff] bg-[#C6C6C6] h-[50rpx] px-[20rpx] flex justify-center items-center text-[25rpx] rounded-[10rpx] mr-[12rpx]"
											>未开始</view
										>
										<text class="text-[#919191] text-[25rpx]"
											>{{ item.startTime }}-{{ item.endTime }}</text
										>
									</view>
									<view v-if="item.status === 1" class="flex items-center">
										<view
											class="text-[#fff] bg-[#2BA5E0] h-[50rpx] px-[20rpx] flex justify-center items-center text-[25rpx] rounded-[10rpx] mr-[12rpx]"
											>进行中</view
										>
										<text class="text-[#919191] text-[25rpx]"
											>{{ item.startTime }}-{{ item.endTime }}</text
										>
									</view>
									<view v-if="item.status === 2 || item.status === 3">
										<text class="text-[#919191] text-[25rpx]">已过期</text>
										<text class="text-[#34A4E2] text-[25rpx] ml-2" v-if="item.progress > 0"
											>计划完成{{ item.progress }}% 获得积分{{ item.user_collect_integral }}/{{
												item.total_integral
											}}</text
										>
										<text class="text-[#919191] text-[25rpx] ml-2" v-else>未参与计划</text>
									</view>
								</view>
							</view>
						</block>
					</block>
					<no-page
						:title="platformInfo.title"
						:type="platformInfo.type"
						height="600rpx"
						v-if="
							platformInfo.thisPage === 0 || (platformInfo.thisPage === 1 && !platformList.length)
						"
						@click="retryPlatform"
					></no-page>
				</view>

				<view class="w-full mt-[37rpx] box-border" v-if="platformInfo.thisPage !== -1">
					<view class="w-full flex justify-between items-center">
						<view class="items-tips pl-3 pr-6 py-2 flex items-center">
							<image
								class="w-[36rpx] h-[36rpx]"
								:src="baseImg + '/class/class-gongdujihua.png'"
							></image>
							<text class="text-[#474747] text-[28rpx] ml-2">班级共读计划</text>
						</view>
						<view
							class="items-back"
							v-if="userInfo.student_id && userInfo.class_id"
							@tap="toPlanClass"
						>
							<image class="w-[20rpx] h-[20rpx]" :src="baseImg + '/class/class-right.png'"></image>
						</view>
					</view>

					<block v-if="userInfo.student_id && userInfo.class_id">
						<block v-if="classList.length">
							<view
								class="bg-white rounded-[30rpx] mt-3 px-3 py-4 w-full box-border flex justify-between flex-col plan-item"
								v-for="item in classList"
								:key="item.id"
								@tap="toDetails(item.id)"
							>
								<view class="w-full">
									<view class="w-full flex justify-between items-center">
										<view class="flex items-center">
											<image
												class="w-[36rpx] h-[36rpx]"
												:src="baseImg + '/class/class-time.png'"
											></image>
											<text
												class="text-[22rpx] ml-1"
												:style="{ color: item.status === 1 ? '#303030' : '#919191' }"
												>{{ item.startTime }}-{{ item.endTime }}</text
											>
										</view>
										<text class="text-[24rpx] text-[#34A4E2]" v-if="item.status === 1"
											>共读进行中</text
										>
										<text
											class="text-[24rpx] text-[#919191]"
											v-if="item.status === 2 || item.status === 3"
											>已过期</text
										>
										<text class="text-[24rpx] text-[#919191]" v-if="item.status === 0">未开始</text>
									</view>
									<view class="text-[29rpx] text-[#303030] mt-2">{{ item.title }}</view>
								</view>
								<view class="w-full flex justify-between items-center mt-[63rpx]">
									<view class="flex items-center">
										<text class="text-[25rpx] text-[#34A4E2]"
											>{{ item.join_total || 0 }}人已参与</text
										>
										<text class="text-[25rpx] text-[#919191] ml-4"
											>{{ item.no_total || 0 }}人待参与</text
										>
									</view>
									<view
										class="flex items-center"
										v-if="item.user_avatar && item.user_avatar.length"
									>
										<image
											v-for="cited in item.user_avatar"
											:key="cited.avatar"
											:src="cited.avatar || baseImg + '/user-default.png'"
											class="w-[48rpx] h-[48rpx] rounded-[50%] ml-2 border-1 first:ml-0 border-solid border-[#f1f1f1]"
										></image>
									</view>
								</view>
							</view>
						</block>

						<no-page
							:title="classInfo.title"
							:type="classInfo.type"
							height="600rpx"
							:btnTitle="classInfo.btnTitle"
							v-if="classInfo.thisPage === 0 || (classInfo.thisPage === 1 && !classList.length)"
							@click="retryClass"
						></no-page>
					</block>
					<no-page
						:title="userLoginInfo.title"
						:type="userLoginInfo.type"
						:btnTitle="userLoginInfo.btnTitle"
						height="600rpx"
						v-if="(!userInfo.student_id || !userInfo.class_id) && platformInfo.thisPage != -1"
						@click="login"
					></no-page>
				</view>
			</view>
		</view>

		<uni-popup ref="popup" :mask-click="false" type="bottom" background-color="transparent">
			<view class="w-full h-[824rpx] px-6 py-4 box-border">
				<view
					class="w-full bg-white h-full rounded-[30rpx] py-6 box-border flex flex-col justify-center"
				>
					<view class="w-full h-[53rpx] flex justify-between items-center px-6 box-border">
						<image
							@tap="closeModal"
							:src="baseImg + '/close-btn.png'"
							class="w-[44rpx] h-[44rpx]"
						></image>
						<text class="text-[#303030] text-[44rpx]">选择年级</text>
						<view
							class="text-[#fff] text-[29rpx] rounded-[29rpx] h-[53rpx] flex px-4 justify-center items-center"
							style="background: #2ba5e0"
							@tap="confirm"
							>确认</view
						>
					</view>
					<view class="w-full pt-6 box-border" style="height: calc(100% - 53rpx)">
						<view class="h-full flex justify-between py-2 box-border">
							<scroll-view scroll-y class="w-full h-full" :scroll-into-view="intoView">
								<view
									v-for="item in gradeList"
									:key="item.id"
									:id="`key-${item.id}`"
									@tap="setItem(item.id, item.name)"
									class="w-full flex justify-center items-center mb-2 last:mb-0"
								>
									<view
										class="max-w-full px-[38rpx] h-[54rpx] box-border flex justify-center items-center rounded-[27rpx] text-[#303030] text-[29rpx]"
										:style="{
											background: modalInfo.id == item.id ? '#44C651' : '',
											color: modalInfo.id == item.id ? '#fff' : '#303030',
										}"
										><text class="truncate">{{ item.name }}</text></view
									>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
import { getPlanGradeList, getPlanList } from '@/service/plan';
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store';
import { toAuthPage } from '@/utils/jump';
import { formatTime } from '@/utils/index';
import onShare from '@/hooks/useShare';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { onShareAppMessage, onShareTimeline } = onShare();

const userStore = useUserStore();
const { userInfo, tokenInfo } = storeToRefs(userStore);
const popup = ref(null);
const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);
const gradeList = ref([]);
const intoView = ref(null);
const gradeInfo = ref({
	id: null,
	name: '',
});
const modalInfo = ref({
	id: null,
	name: '',
});

const currentInfo = computed(() => {
	const obj = platformList.value.filter(item => item.status === 1);
	return obj.length && platformList.value.length > 1 ? obj[0] : null;
});

const platformList = ref([]);
const platformInfo = ref({
	thisPage: -1,
	title: '暂无数据',
	type: 'btn',
});

const classList = ref([]);
const classInfo = ref({
	thisPage: -1,
	title: '暂无数据',
	type: 'btn',
	btnTitle: '重试',
});

const userLoginInfo = ref({
	title: '您还未登录',
	type: 'btn',
	btnTitle: '立即登录',
});

onShow(() => {
	uni.showLoading({ title: '加载中...' });
	getGradeList();
	getList();
});

watch(gradeInfo, newValue => {
	if (newValue) {
		// 获取年级阅读计划
		getPlatformList();
	} else {
		platformInfo.value.type = 'btn';
		platformInfo.value.thisPage = 0;
		platformInfo.value.title = '暂无数据';
	}
});

const toDetails = (id: number) => {
	if (id === undefined) return;
	if (!userInfo.value.student_id) {
		toAuthPage();
		return;
	}
	uni.navigateTo({
		url: `/pages-plan/details/index?id=${id}`,
	});
};

const toPlanClass = () => {
	uni.navigateTo({
		url: '/pages-plan/class/index',
	});
};

const openModal = () => {
	modalInfo.value = gradeInfo.value;
	intoView.value = `key-${gradeInfo.value.id}`;
	popup.value?.open();
};

const closeModal = () => {
	modalInfo.value = {
		id: null,
		name: '',
	};
	intoView.value = null;
	popup.value?.close();
};

const confirm = () => {
	gradeInfo.value = modalInfo.value;
	closeModal();
};

const setItem = (id, name) => {
	modalInfo.value = {
		id,
		name,
	};
};

const getGradeList = async () => {
	try {
		const res = await getPlanGradeList();
		uni.hideLoading();
		if (res.status_code === 200) {
			gradeList.value = res.data;
			platformInfo.value.title = '暂无数据';
			if (!res.data.length) {
				platformInfo.value.thisPage = 0;
				platformInfo.value.type = 'msg';
			} else {
				gradeInfo.value = {
					id: userInfo.value.grade || res.data[0].id,
					name: userInfo.value.grade_name || res.data[0].name,
				};
			}
		} else {
			platformInfo.value.type = 'btn';
			platformInfo.value.thisPage = 0;
			platformInfo.value.title = res.message;
			uni.showToast({
				icon: 'none',
				title: res.message,
			});
		}
	} catch (error) {
		uni.hideLoading();
		platformInfo.value.type = 'btn';
		platformInfo.value.thisPage = 0;
		platformInfo.value.title = '服务器异常';
	}
};

const getList = () => {
	if (userInfo.value.student_id && userInfo.value.class_id) {
		getClassList();
	} else if (tokenInfo.value.token) {
		// 登录-没有账户
		userLoginInfo.value = {
			title: '您还未加入班级哦~',
			btnTitle: '去加入班级',
			type: 'btn',
		};
	} else {
		// 未登录
		userLoginInfo.value = {
			title: '您还未登录',
			btnTitle: '立即登录',
			type: 'btn',
		};
	}
};

const getPlatformList = async () => {
	try {
		const res = await getPlanList({
			grade: gradeInfo.value.id as number,
			type: 1,
			max: 4,
			is_all: 1,
		});
		uni.hideLoading();
		if (res.status_code === 200) {
			res.data.forEach(item => {
				item.startTime = formatTime(item.start_time, '年月', false);
				item.endTime = formatTime(item.end_time, '年月', false);
			});
			platformList.value = res.data;
			platformInfo.value.thisPage = res.data.length ? 1 : 0;
			if (!res.data.length) {
				platformInfo.value.title = '暂无数据';
				platformInfo.value.type = 'msg';
			}
		} else {
			platformInfo.value.type = 'btn';
			platformInfo.value.thisPage = 0;
			platformInfo.value.title = res.message;
		}
	} catch (error) {
		uni.hideLoading();
		platformInfo.value.type = 'btn';
		platformInfo.value.thisPage = 0;
		platformInfo.value.title = '服务器异常';
	}
};

const getClassList = async () => {
	try {
		const res = await getPlanList({
			type: 2,
			max: 3,
			is_all: 1,
		});
		uni.hideLoading();
		if (res.status_code === 200) {
			classList.value = res.data;
			res.data.forEach(item => {
				item.startTime = formatTime(item.start_time, '年月', false);
				item.endTime = formatTime(item.end_time, '年月', false);
			});
			classInfo.value.thisPage = res.data.length ? 1 : 0;
			if (!res.data.length) {
				classInfo.value.type = 'btn';
				classInfo.value.title = '老师暂未发布班级共读计划';
				classInfo.value.btnTitle = '开始自主阅读';
			}
		} else {
			classInfo.value.type = 'btn';
			classInfo.value.thisPage = 0;
			classInfo.value.btnTitle = '重试';
			classInfo.value.title = res.message;
		}
	} catch (error) {
		uni.hideLoading();
		classInfo.value.type = 'btn';
		classInfo.value.thisPage = 0;
		classInfo.value.btnTitle = '重试';
		classInfo.value.title = '服务器异常';
	}
};

const retryClass = () => {
	if (!userInfo.value.student_id) {
		toAuthPage();
		return;
	}
	if (classInfo.value.thisPage === 0 && !classList.value.length) {
		uni.navigateTo({
			url: '/pages-book/index',
		});
		return;
	}
	uni.showLoading({ title: '加载中...' });
	getClassList();
};

const retryPlatform = () => {
	uni.showLoading({ title: '加载中...' });
	if (!gradeInfo.value.id) {
		getGradeList();
	} else {
		getPlatformList();
	}
};

const login = () => {
	toAuthPage();
};
</script>

<style lang="scss" scoped>
.items-back {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 63rpx;
	height: 63rpx;
	background: #f3f3f5;
	border-radius: 50rpx;
}

.plan-item {
	box-shadow:
		0rpx 0rpx 3rpx 0rpx rgb(0 0 0 / 3%),
		0rpx 5rpx 21rpx 0rpx rgb(0 0 0 / 7%);
}

.items-tips {
	background: #f3f3f5;
	border-radius: 30rpx;
}

.triangle {
	width: 0;
	height: 0;
	margin-left: 11rpx;
	border-top: 15rpx solid #777;
	border-right: 10rpx solid transparent;
	border-left: 10rpx solid transparent;
}
</style>
